<template>
  <div class="category">
    <!-- search -->
    <div class="search-wrapper">
      <van-search
        :value="searchWd"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @bind:cancel="onCancel"
      />
    </div>

    <!-- filter -->
    <div class="filter-wrapper">
      <van-cell title="请选择分类" value="分类1" arrow-direction="down" is-link/>
    </div>

    <!-- order by -->
    <div class="order-wrapper">
      <van-row >
        <van-col span="6">
          <div @click="changeTab('a')" class="order" :class="{'active': curTabIndex === 'a'}">综合</div>
        </van-col>
        <van-col span="6">
          <div @click="changeTab('n')" class="order" :class="{'active': curTabIndex === 'n'}">新品</div>
        </van-col>
        <van-col span="6">
          <div @click="changeTab('p')" class="order" :class="{'active': curTabIndex === 'p'}">价格</div>
        </van-col>
        <van-col span="6">
          <div @click="changeTab('s')" class="order" :class="{'active': curTabIndex === 's'}">销售量</div>
        </van-col>
      </van-row>
    </div>

    <!-- goods item list -->
    <div class="goods-list-wrapper">
      <van-row v-for="(singleRow, index) in computedRow" :key="index">
        <div class="list-row">
          <van-col span="12">
          <div class="column cleft">
            <div class="image">
              <img :src="singleRow[0].imgUrl" alt="">
            </div>
            <div class="name">{{singleRow[0].name}}</div>
            <div class="price">
              <span>{{singleRow[0].retailPrice}}<span class="unit">元/人</span></span>
              <span class="original">{{singleRow[0].originalPrice}}<span class="unit">元/人</span></span>
              <span class="hot">热门</span>
            </div>
          </div>
        </van-col>
        <van-col span="12" v-if="singleRow[1]">
          <div class="column cright">
            <div class="image">
              <img :src="singleRow[1].imgUrl" alt="">
            </div>
            <div class="name">{{singleRow[1].name}}</div> 
            <div class="price">
              <span>{{singleRow[1].retailPrice}}<span class="unit">元/人</span></span>
              <span class="original">{{singleRow[1].originalPrice}}<span class="unit">元/人</span></span>
              <span class="hot">热门</span>
            </div>         
          </div>
        </van-col>
        </div>
      </van-row>
    </div>
  </div>
</template>

<script>
import GridCard from "../../components/grid-card/grid-card";
export default {
  props: {},
  data() {
    return {
      searchWd: "",
      curTabIndex:'a',

      totalList: [{
        id: "001",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=1",
        retailPrice:'149',
        originalPrice:'400',
        isHot:true
      },{
        id: "002",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=2",
        retailPrice:'200',
        originalPrice:'250',
        isHot:true
      },{
        id: "003",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=3",
        retailPrice:'149',
        originalPrice:'400',
        isHot:true
      },{
        id: "004",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=4",
        retailPrice:'200',
        originalPrice:'250',
        isHot:true
      },{
        id: "005",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=5",
        retailPrice:'149',
        originalPrice:'400',
        isHot:true
      },{
        id: "006",
        name:"铁军执行力-业务团建，铁军执行力-业务团建",
        imgUrl:"https://dummyimage.com/400x400/e1e1e1/000.png&text=6",
        retailPrice:'200',
        originalPrice:'250',
        isHot:true
      }]
    };
  },
  computed: {
    computedRow() {
      let re = [],
        len = this.totalList.length;
      for (let i = 0; i <= len/2 - 1; i++) {
          re[i] = [this.totalList[i*2], this.totalList[i*2+1]]
      }
      if(len%2 == 1){
          re[Math.floor(len/2)] = [this.totalList[len - 1]]
      }
      return re
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    changeTab(ev){
      this.curTabIndex = ev
    }
  },
  components: {
    GridCard
  }
};
</script>

<style scoped lang="sass">
@import "../../common/style/variable.sass"

.category



    .order-wrapper
        border-bottom: 1px solid #e1e1e1
        .order
            line-height: 70rpx
            height: 70rpx
            font-size: 30rpx
            text-align: center
            &.active
                color: $theme-color
    .goods-list-wrapper
      background-color: $theme-bg-color
      padding: 8rpx 0rpx
      .list-row
        margin-bottom: 8rpx
        .column
          height: 420rpx
          border: 1rpx solid #e1e1e1
          padding: 30rpx 20rpx
          background-color: white
          .image
            height: 290rpx
            margin-bottom: 30rpx
            image
              display: inline-block
              width: 100%
              height: 100%
          .name
            margin: 10rpx 0
            width: 100%
            height: 32rpx
            line-height: 32rpx
            font-size: 30rpx
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
          .price
            margin-top: 6rpx
            font-size: 36rpx
            color: $orange-font-color
            font-weight: bold
            .unit
              font-size: 28rpx
            .original
              text-decoration: line-through
              color: $grey-font-color
              margin-left: 12rpx
              font-size: 22rpx
              .unit
                font-size: 22rpx
            .hot
              margin-left: 12rpx
              display: inline-block
              text-align: center
              font-size: 26rpx
              color: white
              width: 70rpx
              height: 36rpx
              line-height: 36rpx
              background-color: $orange-font-color
              font-weight: normal
              border-radius: 6rpx
        .cleft
          margin-right: 4rpx
          border-left: none
        .cright
          margin-left: 4rpx
          border-right: none
</style>
